<template>
  <el-container>
  <el-aside width="50%">
      <el-descriptions title="模型配置信息" direction="horizontal" :column="1" border size="large">
        <el-descriptions-item label="模型配置ID">{{ configData.id }}</el-descriptions-item>
        <el-descriptions-item label="模型配置名称">{{ configData.modelConfigName }}</el-descriptions-item>
        <el-descriptions-item label="模型配置描述" :span="1">{{ configData.modelConfigDesc }}</el-descriptions-item>
        <el-descriptions-item label="创建时间" :span="2">{{ configData.createTime }}</el-descriptions-item>
        <el-descriptions-item label="更新时间" :span="2">{{ configData.updateTime }}</el-descriptions-item>
        <el-descriptions-item label="epochs" :span="2">{{ configData.epochs }}</el-descriptions-item>
        <el-descriptions-item label="batchSize" :span="2">{{ configData.batchSize }}</el-descriptions-item>
        <el-descriptions-item label="lr" :span="2">{{ configData.lr }}</el-descriptions-item>
      </el-descriptions>

  </el-aside>
  <el-main>
    <!-- 文本输入框 :autosize="{ minRows: 2, maxRows: 4}"-->
    <el-input
        type="textarea"
        rows="10"
        cols="5"
        placeholder="请输入内容"
        v-model="inputText"
        style="width: 60%;display: block;height: 50%;"
        >
    </el-input>
        
      
      <!-- 预测按钮 -->
      <div class="button-container">
      <el-button type="primary" @click="predict">预测</el-button>
      <el-button type="primary" @click="goBack">返回</el-button>
    </div>

      <!-- 显示结果区域 -->
      <!-- <div class="result">{{result}}</div> -->
      <!-- 显示结果区域 -->
      <div class="result">
        <div v-for="(value, key) in result" :key="key" class="result-item">
          {{ key }}: {{ value }}
          <el-progress :percentage="value === 1 ? 100 : value * 100"></el-progress>
        </div>
      </div>

  </el-main>
</el-container>
</template>

<script>
export default {
    data(){
        return{
            configData : [],
            inputText:'',
            fromRoute:'',
            result:{
            '强奸罪':0.995,
            '盗窃罪':0.965,
            '危险驾驶罪':0.495,
            }
        }
    },
    methods:{
        predict(){

        },
        goBack(){
            this.$router.push({ 
            path: this.fromRoute, 
        });
        }
    },


    mounted() {
    // 获取参数
    this.configData = this.$route.query.data;
    this.fromRoute = this.$route.query.fromRoute;
  }

}
</script>

<style scoped>
.container {
  display: flex;
}

  .el-aside {
    flex: 0 0 45%; /* 占据60%的空间 */
    /* background-color: #97bfec; */
    color: #333;
    text-align: left;
    line-height: 50px;
    padding-left: 50px;
    /* padding-right: 150px; */
    /* padding: 10px; 调整内边距 */
  }

  .result-item {
    width: 60%;
  margin-bottom: 10px;
  line-height: 10px;
}
  .el-main {
    flex: 0 0 55%; /* 占据40%的空间 */
    /* background-color: #bae4af; */
    color: #333;
    text-align: center;
    line-height: 160px;
    padding-left: 50px;
    margin: 10px;
  }
  .aside p {
  /* margin: 3px 0; 调整段落之间的垂直间距 */
  height: 1px; /* 设置段落的高度为20像素 */
  line-height: 20px; /* 设置行高与段落高度相同，保证文本垂直居中 */
  overflow: hidden; /* 如果文本超出高度，则隐藏溢出部分 */
}

.button-container {
  display: flex;
  justify-content: flex-start; /* 将内容居左对齐 */
  margin-top: 30px;
  margin-bottom: 20px;
}
.result {
  text-align: left;
  margin-top: 20px;
  /* border: 1px solid #949494; */
  /* padding: 10px; */
}
</style>






